<template>
	<view class="detail-container">
		<u-navbar :title="details.title" bgColor="transparent" :titleStyle="{'color':'transparent'}">
			<view class="flex" slot="left">
				<view class="nav-left flex">
					<u-icon name="arrow-left" size="24" @click="back"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<u-icon name="home" size="24" @click="toHome"></u-icon>
				</view>
			</view>
			<view class="flex" slot="right" :style="{'marginRight':menuWidth + 'px'}">
				<view class="nav-left flex">
					<view class="wx">
						<button open-type="share">
							<u-icon name="share-square" size="24" color="#34314F"></u-icon>
						</button>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="swiper-container">
			<swiper class="swiper" circular indicator-dots autoplay :interval="3000" indicator-active-color="#FFDE6D"
				:current="banIndex" :style="{ height: swiperHeight + 'px' }">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image :src="api_host + item" mode="widthFix" class="width100"
						:style="{ height: swiperHeight + 'px' }"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="store-info">
			<view class="store-info-wrap">
				<view class="store-name">{{ details.provName }}</view>
				<view>
					<!-- <view class="comment flex">
						<u-icon name="star-fill" color="#FFDE6D" size="14"></u-icon>
						<text class="ml5 point">5</text>
						<text class="comment-count">· 400条评价</text>
					</view>
					<view class="sold">
						<text>销售{{ details.salesVolume || 0 }}</text>
					</view> -->
					<!-- <view class="open-date">
						营业时间 09:00～23:00
					</view> -->
					<view class="address-info flex">
						<view class="address-distance">
							<text class="distance">距你{{ details.distance | toFixed2 }}km</text>
							<text class="address">{{ details.provAddr }}</text>
						</view>
						<view class="flex">
							<view class="address-box" @tap="callouttap">
								<image src="https://hxs.dsjhs.com:553/prod-api/profile/dizhi-i.png" mode=""
									style="width:48rpx;height: 48rpx;"></image>
							</view>
							<view class="phone" @tap="handleCall">
								<image src="https://hxs.dsjhs.com:553/prod-api/profile/dianhua-i.png" mode=""
									style="width:48rpx;height: 48rpx;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content-wrap pore">
			<station-tabs :stations="categoryList" @station-change="handleStationChange"
				@filter-change="handleFilterChange"></station-tabs>
			<view class="goods-list">
				<goods-list :dataArray="listData"></goods-list>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsList from '@/components/goodsList/index.vue'
	import StationTabs from './StationTabs.vue'
	import {
		getHomes,
		companyDetail,
		getHomelist
	} from '@/common/api_housekeeping.js'
	
	export default {
		components: {
			goodsList,
			StationTabs
		},
		data() {
			return {
				id: '',
				banIndex: 0,
				swiperHeight: 260,
				details: {},
				categoryList: [],
				listData: [],
				longitude: '',
				latitude: '',
			}
		},
		onLoad(option) {
			console.log(option, 'option')
			this.id = option.id
			this.getCategoryList()
		},
		onShow() {
			// 检查是否已授权地理位置权限
			const _this = this
			uni.getSetting({
				success(res) {
					console.log(res, 'getSetting')
					if (!res.authSetting['scope.userLocation']) {
						// 未授权，需要进行授权
						uni.authorize({
							scope: 'scope.userLocation',
							success() {
								// 用户已同意授权地理位置信息
								console.log('地理位置授权成功');
								// 可以在这里调用获取地理位置的API
								_this.getLocationInfo()
							},
							fail() {
								// 用户拒绝授权地理位置信息
								uni.showModal({
									title: '提示',
									content: '此功能需要获取您的地理位置信息，请确认授权',
									success: function(modalRes) {
										if (modalRes.confirm) {
											// 引导用户去设置中开启权限
											uni.openSetting();
										} else if (modalRes.cancel) {
											_this.rejectGetLocation()
										}
									}
								});
							}
						});
					} else if (res.authSetting['scope.userLocation']) {
						// 已授权，可以直接调用获取地理位置的API
						_this.getLocationInfo()
					}
				}
			});
		},
		computed: {
			bannerList() {
				if (this.details.logo && this.details.logo.indexOf(',') > -1) {
					return this.details.logo.split(',')
				} else {
					return [this.details.logo]
				}
			}
		},
		filters: {
			toFixed2(val) {
				return Number(val).toFixed(2)
			}
		},
		methods: {
			handleStationChange(item, index) {
				// Handle station change
				this.getProductList(item.id)
				console.log('Station changed:', item, index);
			},
			handleFilterChange(item) {
				// Handle filter change
				this.getProductList(item.id)
				console.log('Filter changed:', item);
			},
			// 打电话
			handleCall() {
				uni.makePhoneCall({
					phoneNumber: this.details.phone
				})
			},
			// 导航
			callouttap() {
				uni.openLocation({
					latitude: Number(this.details.latitude),
					longitude: Number(this.details.longitude),
					name: this.details.provName,
					address: this.details.provAddr
				})
			},
			// 商品列表
			async getProductList(typeId) {
				uni.showLoading({
					mask: true
				})
				const res = await getHomes({
					id: typeId,
					provId: this.id
				})
				if (res.code == 200) {
					this.listData = res.data
				}
				uni.hideLoading()
			},
			
			back() {
				uni.navigateBack()
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			
			// 分类列表
			async getCategoryList() {
				const res = await getHomelist()
				if (res.code == 200) {
					const {
						homeTypes
					} = res.data
					this.categoryList = homeTypes
					const typeId = this.categoryList[0].id
					
					this.getProductList(typeId)
				}
			},
			// 店铺详情
			async getStoreDetail() {
				const res = await companyDetail({
					id: this.id,
					longitude: this.longitude,
					latitude: this.latitude
				})
				if (res.code == 200) {
					this.details =  res.data
					console.log(this.details, 'this.details')
				}
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				console.log('进入getLocationInfo方法')
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						// 暂时
						console.log(res, 456789)
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						that.getStoreDetail()
						console.log("获取当前的用户经度", that.longitude);
						console.log("获取当前的用户纬度", that.latitude);
						// var long = 0;
						// var lat = 0;
						// //小数点保留六位  经度
						// if (that.longitude.toString().indexOf('.') > 0) {
						// 	const longlatsplit = that.longitude.toString().split('.');
						// 	if (longlatsplit.length >= 2) {
						// 		long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat(
						// 			"." + longlatsplit[1].slice(0, 6));
						// 	}
						// }
						// if (that.latitude.toString().indexOf('.') > 0) {
						// 	const longlatsplit1 = that.latitude.toString().split('.');
						// 	if (longlatsplit1.length >= 2) {
						// 		lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat(
						// 			"." + longlatsplit1[1].slice(0, 6));
						// 	}
						// }
						
						
					},
					fail: function(err) {
						console.log(err, 999999)
						let system = uni.getSystemInfoSync();
						console.log(system.locationEnabled, '手机gps定位服务')
						// 用户拒绝授权或未开启定位
						uni.showModal({
							title: '提示',
							content: '此功能需要获取您的位置信息，请开启手机定位服务,再重新进此页面',
							success: function(modalRes) {
								if (modalRes.confirm) {
									// 引导用户去设置中开启定位服务
			
								} else {
									that.rejectGetLocation()
								}
							}
						});
					}
				});
			},
			
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "您拒绝了授权，无法为您提供距离显示服务",
					icon: "none",
					duration: 2000,
				});
				this.getStoreDetail()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container {
		width: 100%;
		min-height: 100vh;
		background: #F1F9F6;

		.store-info {
			padding: 0 32rpx;

			.store-info-wrap {
				background: #FFFFFF;
				border-radius: 20px;
				padding: 32rpx;

				.store-name {
					margin-bottom: 12rpx;
					font-weight: 600;
					font-size: 18px;
					color: #34314F;
					line-height: 25px;
					text-align: left;
					font-style: normal;
				}

				.comment {
					margin-bottom: 12rpx;

					.point {
						font-size: 12px;
						color: #FF7F1C;
					}

					.comment-count {
						font-size: 12px;
						color: rgba(52, 49, 79, 0.5);
					}
				}

				.sold {
					margin-bottom: 16rpx;

					text {
						padding: 6rpx 28rpx;
						font-weight: 500;
						font-size: 12px;
						color: #FF7F1C;
						line-height: 16px;
						text-align: center;
						font-style: normal;
						box-sizing: border-box;
						background: rgba(255, 127, 28, 0.09);
						border-radius: 4px;
					}
				}

				.open-date {
					margin-bottom: 16rpx;
					font-weight: 400;
					font-size: 12px;
					color: rgba(52, 49, 79, 0.7);
					line-height: 16px;
					text-align: left;
					font-style: normal;
				}

				.address-info {
					justify-content: space-between;
					padding: 24rpx 28rpx;
					background: #F7F7F7;
					border-radius: 14px;
					box-sizing: border-box;

					.distance {
						display: block;
						font-weight: 600;
						font-size: 13px;
						color: #34314F;
						line-height: 18px;
						text-align: left;
						font-style: normal;
					}

					.address {
						font-weight: 400;
						font-size: 13px;
						color: #34314F;
						text-align: left;
						font-style: normal;
					}

					.address-box {
						padding: 14rpx 32rpx;
						font-weight: 400;
						font-size: 13px;
						color: #34314F;
						line-height: 18px;
						text-align: left;
						font-style: normal;
						background-color: #fff;
						border-radius: 20px;
					}

					.phone {
						margin-left: 28rpx;
						padding: 14rpx 32rpx;
						background-color: #fff;
						border-radius: 20px;
					}
				}
			}
		}

		.content-wrap {
			padding: 0 32rpx;
		}
	}
</style>